<?php ?>

<div id="example" class="k-content">
    <div id="grid"></div>
    <div id="diagnosticar"></div>
    <input id="prueba" type="checkbox" checked="checked" />
    <script>
        var wndD, diagnosticarTemplate;
        var ruta = "<?php echo $this->Html->Url(array('controller' => 'ordenes', 'action' => 'cambiaEstadoDiagnosticando')); ?>";
        var mat = false;
        
        $(document).ready(function () {
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:{
                        url: "<?php echo $this->Html->Url(array('controller' => 'ordenes', 'action' => 'infoDiagnosticar')); ?>",
                        dataType: "json"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                },
                batch: true,
               schema: {
                    model: {
                        id: "id",
                        fields: {
                            nombre: { 
                                type: "string", 
                                editable: true, 
                                nullable: false,
                                validation: { required: true }
                            },
                            ap_paterno: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            },
                            ap_materno: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            },
                            telefono: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            },
                            correo: { 
                                type: "string", 
                                editable: true, 
                                nullable: false,
                                validation: { type: "email",
                                              required: true}
                            },
                            direccion: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            },
                            tipo: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            }
                        }
                    }
                }
            });
            function estado(item) {
                switch(item.estado) {
                    case "0": return "Nueva"
                        break;
                    case "1": return " En diagnostico"
                        break;
                }
            }
            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 430,
                columns: [
                    { field: "id", title:"id", width: "50px" },
                    { field: "folio", title:"folio", width: "100px" },
                    { field: "descripcion", title:"descripcion", width: "100px" },
                    { field: "estado", title:"estado", width: "100px", template: estado},
                    { command: {text: "Diagnosticar", click: cambiarEdo}, title: "&nbsp;", width: "100px" },
                    { field: "fecha", title:"fecha", width: "100px" }],
            });
            wndD = $("#diagnosticar").kendoWindow({
                    title: "Diagnosticar",
                    modal: true,
                    visible: false,
                    resizable: false,
                    width: 300
                }).data("kendoWindow");

            diagnosticarTemplate = kendo.template($("#templateDiagnosticar").html());
        });
        
        function dialogoDiagnosticar(e,dataItem) {
            e.preventDefault();
            mat = false;
            wndD.content(diagnosticarTemplate(dataItem));
            wndD.center().open();   
            
        }
        function cambiarEdo(e) {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var id_orden = dataItem["id"];
            var estado = dataItem["estado"];
            var obs = "Orden en Diagnostico"
            if(estado == 1){
                dialogoDiagnosticar(e,dataItem);
            }
            if(estado == 0){
                $.post(ruta,{id_orden : id_orden, estado : estado, observaciones : obs},recargar);
            }                
        }
        function recargar()
        {
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.read();
        }
        function actualizaTxtA()
        {
            if(mat) {
                $(".ocultable").addClass("hidden");
                mat = false;
            }
            else {
                $(".ocultable").removeClass("hidden");
                mat = true;
            }
        }
        
        function diagnosticado(id_orden){
            var obs = $("#obsD").val();
            var material;
            
            wndD.center().close();
            if($("#chkReqMat").is(":checked") === true) {
                if($("#chkExtMat").is(":checked") === true) {
                    material = 2;
                }
                else {
                    material = 1;
                }
            }
            else {
                material = 0;
            }
            $.post(ruta,{id_orden : id_orden, estado: 1, edoMat : material, observaciones : obs},recargar);
        }
    </script>
    
    <script type="text/x-kendo-template" id="templateDiagnosticar">
        <div id="diagnosticar-container">
            <h2>Orden: #= folio #</h2>
            <em>Observaciones:</em>
            <textarea id="obsD"></textarea><br />
            <label class="etiquetaV">
                <input class="check" type="checkbox" id="chkReqMat" onClick="actualizaTxtA()"> Requiere material
            </label>
            <textarea class="ocultable hidden" id="materialCmt"></textarea><br />
            <label class="etiquetaV ocultable hidden" id="lchkExtMat">
                <input class="check" type="checkbox" id="chkExtMat"> Existe material
            </label>
            <input class="botonFormVentanita" type="button" value="Diagnosticar" onclick="diagnosticado(#= id #);"></input>
        </div>
    </script>
</div>